<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 事件对象  => 事件触发时相关的信息

    // 浏览器侦听到事件触发后,执行对应的事件处理函数  => 并传入事件对象,存储事件触发时相关的信息(什么时间 发生了什么类型的事件 发生在谁身上 鼠标按下的按键  鼠标的位置 键盘按下的按键)

    // 事件对象的兼容
    // e = e || window.event; 

    // 事件对象的相关属性

    var box = document.querySelector(".box");

    // onclick  鼠标单击事件(鼠标左键 按下并松开) 
    box.onclick = function(e){ // event  evt  e => 形参,接收事件对象 (常规浏览器/高版本IE)
        // 低版本IE  window.event;    => 全局变量/属性

        console.log(e);  // 常规浏览器/高版本IE
        console.log(window.event);  // 低版本IE

        // 解决方法:
        e = e ? e : window.event;   // 判断赋值
        e = e || window.event;   // 用法同上 判读e是否有值, 有值就取自身, 否则就取window.event 

        console.log("box被点击");
    }

 

</script>

</html>